<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            width: 300px;
            height: 50px;
            border: 1px solid red;
        }
        
        .bg {
            background-color: pink;
        }
		.font{
		font-size:10px;
		color:yellow;}
    </style>
</head>

<body>
    <div id="app">
    <!-- 对象形式绑定类名采用键值形式， 键是类名;  值是布尔值，控制类是否显示 -->
    <!-- 数组形式绑定类名，不能够直接写类名 -->
    <!-- 数组形式绑定类名，需要在 data 中以键值形式进行声明，键自定义属性，值是 class 类名 -->
    <!-- 细节 1: 数组用法和对象用法可以结合使用 -->
    <!-- 细节 2：数组用法和对象用法都可以简写 -->
    <!-- 细节 3：动态绑定的类名和默认的类名是怎么处理的 -->
    <!-- 答： 两个类名都会生效 -->
	<div :class="[activeClass,bgClass,{active:isActive,bg:isActive}]">数组和对象的结合写法</div>
	<div :class="arrClass">数组的简写</div>
	<div :class="objClass">对象的简写</div>
	<div class="font" :class="isActive">普通和vue混合写法</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                activeClass: 'active',
                bgClass: 'bg',
				arrClass:['active','bg'],
				objClass:{
				active:true,
				bg:true,
				font:true,
				}
            },
            methods: {
                handle() {
                    this.isActive = !this.isActive;
                },
                handle1() {
                    this.activeClass = '';
                    this.bgClass = '';
                }
            }
        })
    </script>
</body>

</html>